<template>
	<view class="camera-box" :style="{ height: webStyle.height }">
		<canvas
			v-if="0"
			id="canvas1"
			canvas-id="canvas1"
			:style="{
				width: cameraStyle.width,
				height: cameraStyle.height
			}"
		></canvas>
		<!-- #ifndef H5 -->
		<camera
			v-if="1"
			:device-position="devicePosition"
			:style="{
				width: cameraStyle.width,
				height: cameraStyle.height
			}"
			resolution="high"
			flash="off"
			output-dimension="1080P"
			@error="error"
			class="camera"
		></camera>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<VIDEO
			v-if="1"
			id="sourceVideo"
			webkit-playsinline
			playsinline
			:style="{
				position: 'absolute',
				transform: isImage ? 'scaleX(-1)' : '',
				width: cameraStyle.width,
				height: cameraStyle.height
			}"
			ref="sourceVideo"
			class="camera"
		></VIDEO>
		<!-- #endif -->
		<!-- <view class="btn_box">
			<button @click="beautifyEnable = !beautifyEnable">美颜：{{ beautifyEnable ? "开" : "关" }}</button>
			<button @click="filterEnable = !filterEnable">滤镜：{{ filterEnable ? "开" : "关" }}</button>
			<button @click="makeupEnable = !makeupEnable">美妆：{{ makeupEnable ? "开" : "关" }}</button>
			<button @click="stickerEnable = !stickerEnable">贴纸：{{ stickerEnable ? "开" : "关" }}</button>
		</view> -->

		<view class="people-border" v-if="type == 1">
			<image class="ren-kuang" :src="imgPath + 'cameraBox/ren_kuang.svg'" mode="widthFix"></image>
		</view>

		<view
			class="tips-cont-box"
			:style="{
				transform: 'translate(' + tipsContObj.calcX + 'px' + ',' + tipsContObj.calcY + 'px' + ')'
			}"
			:data-calcX="tipsContObj.calcX"
			:data-calcY="tipsContObj.calcY"
			v-if="tipsContShow"
		>
			<view class="close">
				<image class="icon" :src="imgPath + 'createAvatar/Close.svg'" mode="widthFix" @tap="tipsContShow = false"></image>
			</view>
			<view class="t">
				<view class="moveBtn" @touchstart.prevent.stop.native="down" @touchmove.prevent.stop.native="move" @touchend.prevent.stop.native="up">
					<view class="line"></view>
					<view class="line"></view>
					<view class="line"></view>
				</view>
			</view>
			<view class="cont-box" v-if="tipsList[tipsListInd]" :style="{ '--height-val': type == 1 ? (readyNum == -1 ? '16vh' : '') : '30vh' }">
				<scroll-view
					class="cont-text"
					:style="{
						'font-size': [66].includes(type) ? '4.6vw' : tipsContObj.fontSize + 'px',
						'clip-path': [2].includes(type) ? 'inherit' : '',
						'clip-path': 'inherit'
					}"
					scroll-y
					:scroll-top="contTextTop"
					@scroll.prevent.stop.native="onTipsContScroll"
				>
					<view class="nr" v-if="type == 1" style="font-size: 4.6vw; text-indent: initial">
						<!-- {{ type == 1 ? tipsList[tipsListInd].cont : readOnlyCont }} -->
						<template v-if="readyNum == 0">
							<view>1、找一个明亮的环境，特别是面部光线充足</view>
							<view>2、录制形式可采用闭合嘴部拍摄，也可全程跟读123口令</view>
							<view>3、脸部距离镜头1米最佳，也可以边走边拍</view>
							<view>4、拍摄时可摆出自然的手部动作</view>
							<view>5、不能侧脸幅度过大，不能仰视或俯视</view>
							<view>6、不能抿嘴巴，吐舌或挡嘴</view>
							<view>7、不能出现多个人脸</view>
							<view>8、准备好后点击录制按钮</view>
						</template>
						<template v-else>录制过程中，您可以轻微点头或摆出说话手势，当数字“1,2,3”出现时，请缓慢清晰的念出“1,2,3”，然后停顿闭合嘴巴，再重复跟读“3,2,1”，直至结束即可。</template>
					</view>
					<view class="nr" v-else style="font-size: 5vw; margin-top: 10vw">
						<!-- <view class="c-91e572 fs-4vw">（请找一个独立且安静的空间，生动地念出下段声音克隆文字，请您格外注意抑扬顿挫！）</view>
						<view>
							我正在录制我的声音克隆素材，我会找个独立且安静的环境，充满感情地念完这段话，而且还会注意抑扬顿挫，这样克隆出来的声音效果更好，只需要像现在这样，对着镜头，说30秒左右就可以了。可能我之前不擅长出镜，或者没有接触过短视频。有了{{
								companyName
							}}数字人，可以给我带来跟多方面的价值；比如省去了过去自己出镜拍视频的麻烦，降本增效。只需要打字就可以生成视频。真的太方便了。
						</view> -->
						<view class="c-91e572 fs-4vw">（授权视频拍摄，请朗读下段内容）</view>
						<view>
							<text>我是xxx</text>
							<text class="c-91e572">（真实姓名）</text>
							<text>，我授权{{ companyName }}使用视频中的肖像、 声音，为我生成定制数字人及声音，并在本人{{ companyName }}账号中创作使用</text>
						</view>
					</view>
					<view class="block"></view>
				</scroll-view>
				<scroll-view v-show="type == 1 && 0" class="cont-scroll" scroll-y :scroll-top="contTextTop" @scroll.prevent.stop.native="onTipsContScroll">
					<view
						class="text"
						:style="{
							'font-size': [66].includes(type) ? '4.6vw' : tipsContObj.fontSize + 'px',
							'clip-path': [66].includes(type) ? 'inherit' : ''
						}"
					>
						{{ type == 1 ? tipsList[tipsListInd].cont : readOnlyCont }}
						<view class="block"></view>
					</view>
				</scroll-view>
			</view>
			<view class="b" v-if="type == 1 && 0">
				<view class="b-l">
					<view class="change-cont" @tap="$refs.tipsContChange.open()">切换文案</view>
				</view>
				<view class="b-r">
					<view class="more" @tap="$refs.tipsContOpt.open()">滚动速度</view>
				</view>
			</view>
		</view>

		<view class="time" v-if="type == 1" v-show="isRecord">{{ seconds2time(countdown) }} / 00:40</view>
		<view class="record" @tap="onMainBtnTap">
			<view
				class="box-fff"
				:style="{
					width: isRecord ? '76%' : '',
					height: isRecord ? '76%' : ''
				}"
			></view>
			<view
				class="record-btn"
				:style="{
					'border-radius': isRecord ? '1.5vw' : '',
					width: isRecord ? '36%' : '',
					height: isRecord ? '36%' : ''
				}"
			></view>
			<view class="circle-progress">
				<view class="circle-progress-outer"></view>
				<view class="left">
					<view class="circle-progress-fill" :style="{ transform: 'rotate(' + leftProgressDeg + 'deg)' }"></view>
				</view>
				<view class="right">
					<view class="circle-progress-fill" :style="{ transform: 'rotate(' + rightProgressDeg + 'deg)' }"></view>
				</view>
			</view>
		</view>

		<view class="ready-box" :styles="{ top: type == 1 ? '5vh' : '' }" v-show="!!readyNum">
			<view class="num" v-if="readyNumShow">{{ type == 1 ? showNum : readyNum }}</view>
			<view class="num" v-else style="text-align: center">
				<view class="" style="font-size: 16vw">
					{{ "停顿" }}
				</view>
				<view class="" style="font-size: 6vw">
					{{ "(此时闭合嘴部)" }}
				</view>
				<view class="" style="font-size: 3.5vw; margin-top: 1vw">
					{{ "别太僵硬哦，可轻微点头，别忘记摆出帅气的姿势" }}
				</view>
			</view>
		</view>

		<view v-if="!isRecord" class="cameraChange" @tap="cameraChange">
			<image class="icon" :src="imgPath + 'index/cameraChange.svg'" mode="widthFix"></image>
		</view>

		<uni-popup @change="tipsPopupShowChange" ref="tipsPopup" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0">
			<view class="popup-view">
				<view class="text-box">
					<view class="text1">对着镜头说话30秒</view>
					<view class="text1">以你感觉舒适的方式进行</view>
					<view class="text2">我们鼓励您脱镐说话，这样您看起来更加自然，更自信。</view>
				</view>
				<view class="cont-list">
					<view class="cont-item"></view>
				</view>
				<view class="btns">
					<view class="btn style1" @tap="recordReady">自由发挥</view>
					<view class="btn style2" @tap="showTipsCont">需要提词器</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="tipsContChange" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0">
			<view class="popup-view">
				<view class="popup-title">选择文案</view>
				<view class="popup-main">
					<view class="cont-list">
						<view :class="['item', tipsListInd == index ? 'ac' : '']" v-for="(item, index) in tipsList" :key="index" @tap="changeTipsListInd({ item, index })">
							{{ item.cont }}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="tipsContOpt" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0">
			<view class="popup-view">
				<view class="popup-title">滚动速度</view>
				<view class="popup-main" style="height: auto">
					<view class="opt-list">
						<view class="item">
							<view class="title">滚动速度</view>
							<view class="slider">
								<slider :min="1" :max="10" value="1" @changing.native="changeTipsContSpeed" activeColor="#FFF" backgroundColor="#000000" block-color="#98c379" @change="" show-value />
							</view>
						</view>
						<view class="item">
							<view class="title">文字大小</view>
							<view class="slider">
								<slider :min="15" :max="50" @changing.native="changeTipsContFontSize" value="15" activeColor="#FFF" backgroundColor="#000000" block-color="#98c379" @change="" show-value />
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- <audio class="page-bgc" loop controls :src="imgPath + 'cameraBox/a321.WAV'"></audio> -->
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/home.js";

// #ifdef H5
import axios from "axios";
// #endif

// import { authFunc, APP_ID, LICENSE_KEY } from "../../utils/webarPluginAuth";

// 阿里云
// let QueenEngineRes = null;
// import QueenEngine, { kQueenBeautyType, kQueenBeautyMakeupType, kQueenBeautyBlend, kQueenBeautyParams } from "../static/aliyun-queen-engine-wx.js";

const requestAnimationFrame =
	window?.requestAnimationFrame ||
	window?.webkitRequestAnimationFrame ||
	window?.mozRequestAnimationFrame ||
	window?.oRequestAnimationFrame ||
	window?.msRequestAnimationFrame ||
	function (callback) {
		setTimeout(callback, 1000 / 60);
	};
let recordedBlobs = [];
export default {
	name: "CameraBox",
	data() {
		return {
			// sdk: null,
			// licenseKey: LICENSE_KEY,
			// appId: APP_ID,
			// authFunc,
			// beautifyEnable: false,
			// filterEnable: false,
			// makeupEnable: false,
			// stickerEnable: false,
			// effectState: [],

			imgPath: tools.imgPath,
			companyName: tools.companyName,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			cameraStyle: {
				width: "",
				height: ""
			},
			isImage: true,
			countdown: 0,
			devicePosition: "front", //front, back
			tipsPopupShow: false,
			recordTimer: null,
			readyNumShow: true,
			showNum: 123,
			readyNum: 0,
			offsetReadyNum: 0,
			leftProgressDeg: 180,
			rightProgressDeg: 180,
			type: 1,
			isRecord: false,
			lockRecord: false,
			cameraContext: null,
			innerAudioContext: null,
			innerAudioContext2: null,
			contTextTop: 0,
			tipsContShow: true,
			tipsContTimer: null,
			tipsContObj: {
				speed: 2,
				fontSize: 23,
				prevX: 0,
				prevY: 0,
				initX: "",
				initY: "",
				calcX: 0,
				calcY: 0
			},
			tipsListInd: 0,
			tipsList: [
				{
					title: "介绍一下你自己1",
					cont: `大家好，我正在录制我的数字人训练视频。我只需要像现在这样，对
					着镜头，说30秒左右的话就可以了。为了能让最终的效果更好，我会注意到这
					这些细节。比如我的拍摄取景环境优美，光线良好，能体现出我想要的风格。
					还有全程表达自信大方，口齿清晰，这样能让数字人有更好的口型效果。对了，
					我的手势、动作和表情也都很自然，全程不僵硬，没有挡住嘴巴，五官一直出
					现在画面中。就是这么简单，很期待最终的成片。`
				},
				{
					title: "介绍一下你自己2",
					cont: `大家好，现在我正在录制言影的数字人。这样，对着镜头，说30秒左
					右的话就可以了。可能我之前并不擅长出镜，或者也没接触过短视频。但现在
					我正在积极的行动探索数字人能够带给我的更多可能。有了数字人，可以给我
					带来多方面的价值:比如省去了过去自己出镜拍视频的麻烦，降本增效。还有
					就是效果很自然，克隆的声音和形象和我本人一模一样。最重要的是操作简单，
					只需要打字就可以生成视频真的太方便了。`
				},
				{
					title: "介绍一下你自己3",
					cont: `大家好，我现在虽然不能脱稿录制，正在念提词器，但是也可以生成
					不错的数字人。只要咱们上传的录制视频能满足:取景构图优美、动作表情自
					然、口齿清晰、表达流畅，最终的效果就不会太差。如果第一次念提词器有点
					不顺畅，也别担心不妨花几分钟时间，多试验练习，找到自己最佳的状态。面
					对人工智能时代的到来，我相信，我的探索和实践，会帮助我超越那些焦虑、
					观望但不行动的人，让我在未来的发展竞争中打破信息差，获得更多的机遇和
					成果。`
				}
			],
			successRes: null,
			tipsOnlyCont: "",
			readOnlyCont: "",
			ReadyTimer2: null
		};
	},
	methods: {
		// 阿里云美颜初始化
		async initQE() {
			z;
			return;
			let canvas = await new Promise((resolve) => {
				wx.createSelectorQuery()
					.select("#canvas1")
					.fields({ node: true })
					.exec((res) => {
						resolve(res[0].node);
					});
			});
			let queenEngine = new QueenEngine();
			queenEngine.setWasmUrl("../static/"); //queen.wasm.br文件目录
			queenEngine.init(
				"6PrHC58gMN5mZwZqOa64bb172acc9461aac13c00972c4919f",
				function () {
					console.info("queen ready");
				},
				function (progress) {
					console.log({ progress });
				},
				canvas
			);
		},

		// 视立方初始化
		onArCreated(sdk) {
			this.sdk = sdk;
		},

		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 9.6;
									break;
							}
						}
						resolve(payload);
					},
					fail() {
						resolve(false);
					}
				});
			});
		},

		// 相机初始化
		initCameraContext() {
			// #ifndef H5
			if (!this.cameraContext) {
				this.cameraContext = uni.createCameraContext();
				let nameStr = this.companyName;
				this.readOnlyCont = "我是XXX(真实姓名)，我授权" + nameStr + "使用视频中的肖像、声音，为我生成定制数字人及声音，并在本人" + nameStr + "账号中创作使用。";
				this.tipsOnlyCont = "so easy! 接下来您将录制一段30秒的【闭口】视频，请您保持【静默】录制，录制期间，您可以进行走动，同时并展现自信表情和肢体动作，只需面朝镜头，保持画面的稳定性即可。";
				let { windowHeight, windowWidth } = this.systemInfo;
				console.log("相机初始化", this.systemInfo);
				let width = "";
				let height = "";
				if ((windowWidth * 16) / 9 > windowHeight) {
					height = windowHeight + "px";
					width = ((windowHeight * 9) / 16).toFixed(0) + "px";
				} else {
					width = windowWidth + "px";
					height = ((windowWidth * 16) / 9).toFixed(0) + "px";
				}
				this.cameraStyle = { width, height };
			}
			// #endif
			// {
			// 	"duration": 11,
			// 	"size": 1965751,
			// 	"tempVideoPath":"wxfile://tmp_9fbfd9940b5d104ac9acb33a5a66f7215e03cbb98b5f4728.mp4",
			// 	"width": 720,
			// 	"errMsg": "operateCamera:ok",
			// 	"tempThumbPath": "wxfile://tmp_889d11514b89d5f46c7d17587b735976b5df4691997de552262b0e906980cd88.jpeg",
			// 	"height": 592
			// }
		},

		// 背景音效初始化
		initInnerAudioContext() {
			if (!this.innerAudioContext) {
				let innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.src = this.imgPath + "cameraBox/aa321.WAV";
				this.innerAudioContext = innerAudioContext;
			}
		},
		// 背景音效初始化2
		async initInnerAudioContext2() {
			if (this.type != 1) return;
			console.log("背景音效初始化2", this.innerAudioContext2);
			if (!this.innerAudioContext2) {
				let innerAudioContext2 = uni.createInnerAudioContext();
				innerAudioContext2.volume = 1;
				innerAudioContext2.onError((err) => {
					console.log("onError", this.innerAudioContext2.src, this.innerAudioContext2.currentTime);
				});
				innerAudioContext2.onCanplay((err) => {
					console.log("onCanplay", this.innerAudioContext2.src, this.innerAudioContext2.currentTime);
				});
				innerAudioContext2.onPlay((err) => {
					console.log("onPlay", this.innerAudioContext2.src, this.innerAudioContext2.currentTime);
				});
				innerAudioContext2.onTimeUpdate((err) => {
					let pages = getCurrentPages();
					if (!["cameraBox/cameraBox/cameraBox", "cameraBox/cameraBoxWeb/cameraBoxWeb"].includes(pages[pages.length - 1].route)) {
						innerAudioContext2.stop();
					}
					// console.log("onTimeUpdate", this.innerAudioContext2.src, this.innerAudioContext2.currentTime);
				});
				this.innerAudioContext2 = innerAudioContext2;
			}
			this.innerAudioContext2.src = this.imgPath + "cameraBox/tips2.WAV";
			await new Promise((next) => setTimeout(next, 1520));
			console.log("背景音效初始化2", this.innerAudioContext2, this.innerAudioContext2.src);
			this.innerAudioContext2.play();
		},
		// 初始化类型
		initType() {
			let type = uni.getStorageSync("CameraBoxType");
			if (type) {
				this.type = type;
				// uni.removeStorageSync("CameraBoxType");
			}
		},

		// 初始化readyTimer
		async initReadyTimer() {
			if (!this.readyNum && !this.offsetReadyNum) {
				this.readyNum = 3;
				this.offsetReadyNum = 5;
				this.innerAudioContext.play();
				return await new Promise((next) => {
					let timer = setInterval(() => {
						this.readyNum--;
						if (this.readyNum == 0) {
							this.readyNum = "0";
							clearInterval(timer);
							let timer2 = setInterval(() => {
								this.offsetReadyNum--;
								if (this.offsetReadyNum == 0) {
									clearInterval(timer2);
								}
							}, 1000);
							next(true);
						}
					}, 1000);
				});
			} else {
				return false;
			}
		},

		// 初始化readyTimer
		async initReadyTimer2() {
			return await new Promise((next) => {
				let num = 0;
				let timeUnit = 1000;
				this.ReadyTimer2 = setInterval(() => {
					num += timeUnit;
					console.log(num);
					if (num % 3000 == 0) {
						this.readyNum++;
						this.readyNumShow = true;
						this.showNum = this.showNum == 123 ? 321 : 123;
					} else {
						this.readyNumShow = false;
					}
					if (num == 40000) {
						clearInterval(this.ReadyTimer2);
						this.ReadyTimer2 = null;
						this.readyNum = 0;
						this.readyNumShow = true;
						this.showNum = 123;
						this.innerAudioContext2.stop();
						next(true);
					}
				}, timeUnit);
			});
		},

		// 相机切换
		cameraChange() {
			// #ifdef H5
			this.cameraChange_H5();
			return;
			// #endif
			// front, back
			this.devicePosition = this.devicePosition == "front" ? "back" : "front";
		},

		// 修改提词器文案文字大小
		changeTipsContFontSize(event) {
			// event.detail = {value: value}
			this.tipsContObj.fontSize = event.detail.value;
		},

		// 修改提词器文案滚动速度
		changeTipsContSpeed(event) {
			// event.detail = {value: value}
			this.tipsContObj.speed = event.detail.value;
		},

		// 切换提词器文案
		changeTipsListInd({ item, index }) {
			this.tipsListInd = index;
			this.$refs.tipsContChange.close();
			this.tipsContShow = true;
		},

		// 移动提词器
		down(event) {
			event.preventDefault();
			// 获取初始触碰坐标
			let { pageX, pageY } = event.changedTouches[0];
			// this.tipsContObj = {
			// 	initX: pageX,
			// 	initY: pageY
			// };
			this.tipsContObj.initX = pageX;
			this.tipsContObj.initY = pageY;
			// this.$set(this.tipsContObj, "initX", pageX);
			// this.$set(this.tipsContObj, "initY", pageY);
		},

		// 移动提词器
		move(event) {
			event.preventDefault();
			let { pageX, pageY } = event.changedTouches[0];
			let { prevX, prevY } = this.tipsContObj;
			let calcX = pageX - this.tipsContObj.initX;
			let calcY = pageY - this.tipsContObj.initY;

			// this.$set(this.tipsContObj, "calcX", calcX);
			// this.$set(this.tipsContObj, "calcY", calcY);
			this.tipsContObj.calcX = prevX + calcX;
			this.tipsContObj.calcY = prevY + calcY;
		},

		// 移动提词器
		up(event) {
			event.preventDefault();
			this.tipsContObj.prevX = this.tipsContObj.calcX;
			this.tipsContObj.prevY = this.tipsContObj.calcY;
			// this.$set(this.tipsContObj, "prevX", this.tipsContObj.calcX);
			// this.$set(this.tipsContObj, "prevY", this.tipsContObj.calcY);
		},

		// 监听提示词弹出层变化
		tipsPopupShowChange(e) {
			//e={show: true｜false,type:当前模式}
			this.tipsPopupShow = e.show;
		},

		// 准备录像
		async recordReady_old() {
			this.$refs["tipsPopup"]?.close();
			let next = await this.initReadyTimer();
			await new Promise((next) => setTimeout(next, 886));
			this.readyNum = 0;
			if (!next) return;
			if ([1].includes(this.type) && this.tipsContShow) {
				if (!this.tipsContTimer) {
					this.tipsContTimer = setInterval(() => {
						this.contTextTop += 0.068 + (this.tipsContObj.speed - 1) * 0.152;
					}, 32);
				}
			}
			this.recordVideo();
		},

		// 准备录像
		async recordReady() {
			this.readyNum = -1;
			this.innerAudioContext2.src = this.imgPath + "cameraBox/audio2.WAV";
			this.innerAudioContext2.play();
			await new Promise((next) => {
				this.innerAudioContext2.onEnded((e) => {
					next(true);
				});
			});
			console.log("开始录像");
			this.readyNum = 1;
			this.tipsContShow = false;
			this.recordVideo();
			this.innerAudioContext2.src = this.imgPath + "cameraBox/audio1.WAV";
			await new Promise((next) => setTimeout(next, 886));
			this.innerAudioContext2.play();
			const flag = await this.initReadyTimer2();
			console.log("结束录像");
			await new Promise((next) => setTimeout(next, 186));
			this.recordVideo();
		},

		// 报错
		error(event) {
			console.log(event);
			tools.easyToast("相机初始化失败！");
		},

		// 点击录制按钮
		onMainBtnTap_old() {
			if (this.readyNum || this.offsetReadyNum || this.lockRecord) return;
			if (!this.isRecord) {
				if (this.type == 1 && !this.tipsContShow) {
					this.$refs["tipsPopup"]?.open("bottom");
				} else {
					if (this.type == 3) {
						this.tipsContShow = true;
					}
					this.recordReady_old();
				}
			} else {
				this.recordVideo();
			}
			// this.recordVideo();
		},

		// 点击录制按钮
		onMainBtnTap() {
			if (this.type == 3) {
				this.onMainBtnTap_old();
				return;
			}
			if (this.readyNum || this.offsetReadyNum) return;
			if (!this.isRecord) {
				if (!this.innerAudioContext2.paused) {
					this.innerAudioContext2.stop();
				}
				this.recordReady();
			} else {
				this.recordVideo();
			}
		},

		// 录视频
		recordVideo() {
			// #ifdef H5
			this.recordVideo_H5();
			return;
			// #endif
			const that = this;
			if (!that.cameraContext) that.initCameraContext();
			if (!that.isRecord) {
				//开始录音
				let timeout = 40;
				that.countdown = timeout;
				that.cameraContext.startRecord({
					timeout: 60 * 4,
					success(res) {
						console.log("cameraContext.startRecord.res", timeout + 30, res);
						that.isRecord = true;
					},
					fail(err) {
						console.log("cameraContext.startRecord.err", err);
					},
					timeoutCallback(res) {
						console.log("timeoutCallback", res);
						tools.easyToast("录制失败，请重新录制！");
						that.cameraContext = null;
						that.rightProgressDeg = 180;
						that.leftProgressDeg = 180;
					}
				});
				let second = 0;
				if (/* [1].includes(this.type) && */ !that.recordTimer) {
					that.rightProgressDeg = 180;
					that.leftProgressDeg = 180;
					that.recordTimer = setInterval(() => {
						if (second != timeout) {
							second++;
							that.countdown = timeout - second;
							if (second < timeout / 2 + 1) {
								that.rightProgressDeg += 180 / (timeout / 2);
							} else {
								that.leftProgressDeg += 180 / (timeout / 2);
							}
						} else {
							// that.recordVideo();
						}
					}, 1000);
				}
			} else {
				that.isRecord = false;
				that.lockRecord = true;
				uni.showLoading({
					title: "请稍后..."
				});
				//结束录音
				that.cameraContext.stopRecord({
					success(res) {
						console.log("cameraContext.stopRecord.res", res);
						if ([1].includes(that.type) && res.duration < 25) {
							return tools.easyToast("录制视频的时间太短,请重新录制!");
						}
						that.successRes = res;
						uni.setStorageSync("tempRecordVideoRes" + that.type, res);
						console.log("结束录音", "tempRecordVideoRes" + that.type, res);
						setTimeout(() => {
							that.cameraContext = null;
							that.rightProgressDeg = 180;
							that.leftProgressDeg = 180;
							that.toPage("/pages/RecordVideo/RecordVideo");
						}, 866);
					},
					fail(err) {
						console.log("cameraContext.stopRecord.err", err);
						tools.easyToast("录制失败，请重新录制！");
						that.cameraContext = null;
						that.rightProgressDeg = 180;
						that.leftProgressDeg = 180;
					},
					complete() {
						uni.hideLoading();
						clearInterval(that.recordTimer);
						that.recordTimer = null;
						if (that.tipsContTimer) {
							clearInterval(that.tipsContTimer);
							that.tipsContTimer = null;
							that.tipsContShow = false;
							that.contTextTop = 0;
						}
					}
				});
			}
			// uni.chooseVideo({
			// 	sourceType: ["camera"], // 使用摄像头录制
			// 	camera: "back", // 使用后置摄像头，可选前置'front'
			// 	maxDuration: 60, // 最大录制时长（秒）
			// 	success: (res) => {
			// 		console.log("视频录制成功：", res);
			// 		// 处理视频，例如播放或上传
			// 	},
			// 	fail: (err) => {
			// 		console.error("视频录制失败：", err);
			// 	}
			// });
		},

		// 打开弹出层
		openPopup(refName) {
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs[refName]?.open("bottom");
		},

		// 监听提词器滚动
		onTipsContScroll(evnet) {
			if (this.isRecord) return;
			// event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
			this.contTextTop = evnet.detail.scrollTop;
		},

		// 显示题词器
		async showTipsCont() {
			// this.tipsContShow = true;
			this.$refs["tipsPopup"]?.close();
			this.$refs["tipsContChange"]?.open();
			// this.recordReady();
		},

		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},

		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 2
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 打开相机
		openCamera(constraints) {
			let width = "";
			let height = "";
			let { windowHeight, windowWidth } = this.systemInfo;
			console.log("打开相机099！", { windowHeight, windowWidth });
			constraints = constraints || {
				audio: true,
				video: {
					// width: 1920,
					// height: 1080
					// width: {
					// 	// 视频宽度（可以设置一个固定的值，也可以像这样设置一个范围，下同）
					// 	min: 271,
					// 	max: 720
					// },
					// height: {
					// 	// 视频高度
					// 	min: 200,
					// 	max: 1280
					// },
					// resizeMode: "crop-and-scale",
					aspectRatio: 16 / 9
					// codecs: {
					// 	video: "h264" // 指定H.264编码
					// }
					// frameRate: {
					// 	// 帧率
					// 	min: 15,
					// 	max: 60
					// },
					// mandatory: { maxWidth: 1280, maxHeight: 720 }
					// facingMode: {
					// 	exact: "environment" // 精确指定镜像模式为环境模式，即后置摄像头
					// }
				}
			};
			return new Promise((succ) => {
				if (typeof navigator.mediaDevices !== "undefined") {
					navigator.mediaDevices
						.getUserMedia(constraints)
						.then(async (mediaStream) => {
							this.videoStreamSource = mediaStream;
							mediaStream.getTracks().forEach(function (track) {
								var settings = track.getSettings();
								if (settings.hasOwnProperty("bitrate")) {
									console.log("The bitrate is: " + settings.bitrate + " bps");
								} else {
									console.log("The browser does not report the bitrate.");
								}
							});
							// 纹理渲染
							const sourceVideo = document.getElementById("sourceVideo");
							await new Promise((next) => {
								sourceVideo.srcObject = mediaStream;
								sourceVideo.muted = true;
								sourceVideo.play();
								sourceVideo.oncanplaythrough = () => {
									next(true);
								};
							});

							let last = Date.now();
							let ticks = 0;
							const loopFn = () => {
								ticks += 1;
								//每30帧统计一次帧率
								if (ticks >= 30) {
									const now = Date.now();
									const diff = now - last;
									const fps = Math.round(1000 / (diff / ticks));
									last = now;
									ticks = 0;
									console.log("loopFn", {
										fps,
										videoHeight: sourceVideo.videoHeight,
										videoWidth: sourceVideo.videoWidth
									});
								}

								width = windowWidth;
								height = (sourceVideo.videoHeight * width) / sourceVideo.videoWidth;
								this.cameraStyle.width = width + "px";
								this.cameraStyle.height = height + "px";
								let queenRender = (this.queenRender = requestAnimationFrame(loopFn));
							};
							loopFn();
							succ(true);
						})
						.catch((err) => {
							/* handle the error */
							console.log(err);
							// if (err.message) {
							// 	return tools.easyToast("message:" + err.message);
							// }
							// if (err.name) {
							// 	return tools.easyToast("name:" + err.message);
							// }
							if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
								alert("required track is missing");
								succ(true);
								//required track is missing
							} else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
								alert("webcam or mic are already in use");
								succ(true);
								//webcam or mic are already in use
							} else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
								alert("constraints can not be satisfied by avb. devices");
								succ(true);
								//constraints can not be satisfied by avb. devices
							} else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
								alert("permission denied in browser");
								succ(true);
								//permission denied in browser
							} else if (err.name == "TypeError" || err.name == "TypeError") {
								alert("empty constraints object");
								succ(true);
								//empty constraints object
							} else {
								alert("message:" + err.message);
								succ(true);
								//other errors
							}
						});
				} else {
					alert("请开启摄像头支持.");
					succ(true);
				}
			});
		},

		// 相机切换
		cameraChange_H5() {
			// front, back
			navigator.mediaDevices.enumerateDevices().then((devices) => {
				this.devicePosition = this.devicePosition == "front" ? "back" : "front";
				console.log(devices);
				let filterList = devices.filter((device) => device.kind === "videoinput");
				if (filterList.length < 2) {
					return;
				} else {
					// clearInterval(this.queenRender);
					cancelAnimationFrame(this.queenRender);
					this.queenRender = null;
					// this.queenEngine.engineDestory();
					this.isImage = !this.isImage;
					let video =
						this.devicePosition == "front"
							? {
									// width: 1920,
									// height: 1080,
									aspectRatio: 16 / 9,
									deviceId: {
										exact: filterList[0].deviceId
									}
							  }
							: {
									// width: 1920,
									// height: 1080,
									aspectRatio: 16 / 9,
									deviceId: {
										exact: filterList[1].deviceId
									}
							  };

					this.openCamera({
						audio: true,
						video
						// video: {
						// 	width: 1280,
						// 	height: 720,
						// 	aspectRatio: this.devicePosition == "front" ? 16 / 9 : "",
						// 	deviceId: {
						// 		exact: filterList[this.devicePosition == "front" ? 0 : 1].deviceId
						// 	}
						// }
					});
				}
			});
		},

		// 录视频（web）
		recordVideo_H5() {
			const that = this;
			let waitTime = 1500;
			let videoBitsPerSecond = 2500000;
			try {
				if (!that.isRecord) {
					// const mp4TypeStr = 'video/webm; codecs="h264"';
					let mediaContainerFormat = [
						{
							name: "h264(.mp4格式)",
							value: "video/webm\;codecs=h264",
							format: ".mp4"
						},
						{
							name: "vp8(.webm格式)",
							value: "video/webm\;codecs=vp8",
							format: ".webm"
						},
						{
							name: "vp9(.webm格式)",
							value: "video/webm\;codecs=vp9",
							format: ".webm"
						},
						{ name: "mkv", value: "video/x-matroska;codecs=avc1", format: ".mkv" },
						{ name: "h264(ios.mp4格式)", value: 'video/mp4; codecs="avc1.42E01E"', format: ".mp4" },
						{ name: "默认", value: "video/webm", format: ".webm" },
						{ value: 'video/mp4; codecs="avc1"' },
						{ value: 'video/webm; codecs="avc1"' },
						{ value: 'video/webm; codecs="avc1.42E01E"' },
						{ value: 'video/mp4; codecs="h264"' }
					];
					mediaContainerFormat.map((e) => {
						console.log(e, MediaRecorder.isTypeSupported(e.value));
					});
					const mp4TypeStr = "video/mp4"; //mp4编码类型
					const mime = MediaRecorder.isTypeSupported(mp4TypeStr) ? mp4TypeStr : "video/webm";

					//开始录制
					const options = {
						// audioBitsPerSecond: 128000,
						// 13044000 2500000
						// videoBitsPerSecond: videoBitsPerSecond, // (1080P 25FPS 8bit)视频无损为1186000000
						mimeType: mime
					};
					// 合并流
					// let mergedStream = new MediaStream();
					// let videoStream = that.canvasStreamSource;
					// let audioStream = that.videoStreamSource;
					// if (videoStream.getVideoTracks().length > 0) {
					// 	mergedStream.addTrack(videoStream.getVideoTracks()[0]);
					// }
					// if (audioStream.getAudioTracks().length > 0) {
					// 	mergedStream.addTrack(audioStream.getAudioTracks()[0]);
					// }
					let mergedStream = that.videoStreamSource;
					console.log("流", { mergedStream });
					let cameraContext = new MediaRecorder(mergedStream);
					that.cameraContext = cameraContext;
					console.log("录视频（web）888", options, cameraContext, { mimeType111: cameraContext.mimeType });
					that.cameraContext.ondataavailable = (event) => {
						if (event.data && event.data.size > 0) {
							recordedBlobs.push(event.data);
						}
					};
					that.cameraContext.onstop = async () => {
						console.log("Recording stopped", recordedBlobs);
						uni.showLoading({
							title: "请稍后..."
						});
						if (recordedBlobs.length == 0) {
							that.isRecord = false;
							clearInterval(that.recordTimer);
							that.recordTimer = null;
							return tools.easyToast("录制视频失败,请联系相关技术人员！~");
						}
						const superBufferType = mime == mp4TypeStr ? "video/mp4" : /* recordedBlobs[0].type || */ "video/webm";
						// const superBufferType = recordedBlobs[0].type;
						console.log({ "recordedBlobs[0].type": recordedBlobs[0].type, "cameraContext.mimeType": cameraContext.mimeType, superBufferType });
						let superBuffer = new Blob(recordedBlobs, { type: superBufferType });
						const superBufferFix = await new Promise((next, rej) => {
							try {
								// this.getSeekableBlob(superBuffer, superBufferType, function (res) {
								// 	next(res);
								// });
								next(superBuffer);
							} catch (e) {
								console.log("superBufferFix 报错");
								console.err(e);
								next(superBuffer);
							}
						});
						console.log("superBufferFix", superBufferFix);
						superBuffer = superBufferFix;
						const url = URL.createObjectURL(superBuffer);
						// if ([1].includes(that.type) && res.duration < 25) {
						// 	return tools.easyToast("录制视频的时间太短,请重新录制!");
						// }

						let name = new Date().getTime() + (mime == mp4TypeStr ? ".mp4" : ".webm");
						console.log("superBuffer.type", superBuffer.type, name);
						const fileOfBlob = new File([superBuffer], name, {
							type: superBuffer.type
						});
						let ossData = await api.postOSS({
							reqType: "",
							matName: name,
							payLoad: {}
						});
						console.log("ossData", ossData);
						let res = await that.getOSSApi_new(ossData, fileOfBlob, name);
						console.log(res);
						that.rightProgressDeg = 180;
						that.leftProgressDeg = 180;
						if (res && res.src) {
							let tempThumbPath = await api.processingVideo({ url: res.src, num: 1 });
							// console.log(tempThumbPath);
							if (!tempThumbPath || !tempThumbPath.data) {
								tools.easyToast("录制视频失败，请您重新录制！");
							} else {
								that.successRes = {
									tempThumbPath: tempThumbPath.data,
									tempVideoPath: res.src
								};
								console.log(that.successRes);
								uni.setStorageSync("tempRecordVideoRes" + that.type, that.successRes);
								setTimeout(() => {
									that.cameraContext = null;
									uni.hideLoading();
									that.toPage("/pages/RecordVideo/RecordVideo");
								}, 866);
								// uni.webView.postMessage({
								// 	data: {
								// 		type: "submitSuccess",
								// 		res: that.successRes,
								// 		resType: that.type
								// 	}
								// });
								// setTimeout(() => {
								// 	uni.webView.redirectTo({
								// 		url: "/pages/RecordVideo/RecordVideo",
								// 		success() {
								// 			console.log;
								// 		}
								// 	});
								// }, waitTime);
								// that.toPage("/pages/RecordVideo/RecordVideo");
							}
						}

						// const a = document.createElement("a");
						// a.href = url;
						// a.download = "recordedVideo.webm";
						// a.click();

						// 清理
						window.URL.revokeObjectURL(url);
						recordedBlobs = [];
						that.isRecord = false;
						clearInterval(that.recordTimer);
						that.recordTimer = null;
					};
					let timeout = 40;
					that.countdown = timeout;
					that.cameraContext.start();
					console.log("Recording started");
					that.isRecord = true;

					let second = 0;
					if ([1].includes(that.type) && !that.recordTimer) {
						that.rightProgressDeg = 180;
						that.leftProgressDeg = 180;
						that.recordTimer = setInterval(() => {
							if (second != timeout) {
								second++;
								that.countdown = timeout - second;
								if (second < timeout / 2 + 1) {
									that.rightProgressDeg += 180 / (timeout / 2);
								} else {
									that.leftProgressDeg += 180 / (timeout / 2);
								}
							} else {
								that.cameraContext.stop();
							}
						}, 1000);
					}
				} else {
					that.cameraContext.stop();
				}
			} catch (error) {
				//TODO handle the exception
				that.isRecord = false;
				console.error("Error starting to record video:", error);
			}
		},

		//上传文件api(web)
		async getOSSApi_new(ossData, file, name) {
			const that = this;
			let res = ossData;

			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			const formData = new FormData();
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			formData.append("policy", res.data.policy);
			formData.append("signature", res.data.signature);
			formData.append("ossaccessKeyId", res.data.accessid);
			formData.append("key", key);
			formData.append("dir", res.data.dir);
			formData.append("host", res.data.host);
			formData.append("expire", res.data.expire);
			formData.append("callback", res.data.callback);
			// formData.append('type', res.data.callback)
			formData.append("file", file);

			return axios
				.post(url_name, formData, {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				})
				.then((response) => {
					let src = url_name + "/" + key;
					// console.log(src);
					// that.audioPlayerSrc = src;
					// console.log(response);
					return {
						...response,
						src
					};
				})
				.catch((error) => {
					console.log(error);
				});
		}
	},
	watch: {
		beautifyEnable: function (val) {
			if (val) {
				this.sdk.setBeautify({
					whiten: 0.3,
					dermabrasion: 0.7,
					eye: 1
				});
			} else {
				this.sdk.setBeautify({
					whiten: 0,
					dermabrasion: 0,
					eye: 0
				});
			}
		},
		filterEnable(val) {
			if (val) {
				this.sdk.setFilter("5505217E53997405", 1);
			} else {
				this.sdk.setFilter("5505217E53997405", 0);
			}
		},
		makeupEnable(val) {
			if (val) {
				this.effectState.push({
					// 美妆
					id: "9C7E317E53997405",
					intensity: 1
				});
			} else {
				this.effectState = this.effectState.filter((item) => {
					return item.id !== "9C7E317E53997405";
				});
			}
			this.sdk.setEffect(this.effectState, 1);
			console.log(this.effectState);
		},
		stickerEnable(val) {
			if (val) {
				this.effectState.push({
					id: "BF3C417FD91CACC0" /* 悟空特效 */,
					intensity: 1
				});
			} else {
				this.effectState = this.effectState.filter((item) => {
					return item.id !== "BF3C417FD91CACC0" /* 悟空特效 */;
				});
			}
			console.log(this.effectState);
			this.sdk.setEffect(this.effectState, 1);
		}
	},
	async onLoad() {
		await this.initSystemInfo();
		// this.initQE();
		this.initCameraContext();
		this.initInnerAudioContext();
		this.initType();
		this.initInnerAudioContext2();
	},
	onShow() {
		this.lockRecord = false;
		// #ifdef H5
		this.openCamera();
		// #endif
	},
	onHide() {
		if (this.ReadyTimer2) {
			clearInterval(this.ReadyTimer2);
			this.ReadyTimer2 = null;
		}
		if (this.queenRender) {
			cancelAnimationFrame(this.queenRender);
			this.queenRender = null;
		}
	},
	onUnload() {
		if (this.ReadyTimer2) {
			clearInterval(this.ReadyTimer2);
			this.ReadyTimer2 = null;
		}
		if (this.queenRender) {
			cancelAnimationFrame(this.queenRender);
			this.queenRender = null;
		}
		if (this.innerAudioContext) {
			this.innerAudioContext.stop();
			this.innerAudioContext.destroy();
			this.innerAudioContext = null;
		}
		if (this.innerAudioContext2) {
			this.innerAudioContext2.stop();
			this.innerAudioContext2.destroy();
			this.innerAudioContext2 = null;
		}
	},
	computed: {
		// 秒数转时间
		seconds2time() {
			return (index_num) => {
				// tools.seconds2time;
				if (!index_num) return "00:00";
				// let getHours = (parseInt(index_num / 60 / 60) % 12).toString().padStart(2, 0);
				// let getMinutes = (parseInt(index_num / 60)% 60).toString().padStart(2, 0);
				let getMinutes = parseInt(index_num / 60)
					.toString()
					.padStart(2, 0);
				let getSeconds = (index_num % 60).toFixed(0);
				if (getSeconds < 10) getSeconds = "0" + getSeconds;
				// let str = `${getHours}.${getMinutes}.${getSeconds}`;
				let str = `${getMinutes}:${getSeconds}`;
				return str;
			};
		}
	},
	components: {
		// WebArCamera
	}
};
</script>

<style lang="scss">
.camera-box {
	background: #000;
	position: relative;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;

	.c-91e572 {
		font-weight: 700;
		color: #91e572 !important;
		text-align: center;
	}
	.fs-4vw {
		font-size: 4vw;
		text-indent: initial;
	}
	.camera {
		width: 100vw;
		height: calc(100vw * 16 / 9);
	}

	.btn_box {
		position: fixed;
		display: flex;
		width: 100vw;
		bottom: 10%;
		justify-content: space-between;
		z-index: 9999;
	}
	.btn_box button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 15vw;
		margin: 5.2vw 0vw;
		border-radius: 2.5vw;
		font-weight: bold;
		background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
		color: #000;
	}

	.people-border {
		top: 12vw;
		position: absolute;
		color: #f00;
		.ren-kuang {
			width: 100vw;
		}
	}

	.tips-cont-box {
		position: absolute;
		width: 86%;
		display: flex;
		flex-direction: column;
		top: 5vh;
		background: rgba(126, 126, 126, 0.386);
		box-sizing: border-box;
		border-radius: 2vw;
		padding: 3vw;
		// transform: translate(10px,10px);

		.close {
			position: absolute;
			top: 1vw;
			right: 1vw;
			.icon {
				width: 5vw;
				display: block;
			}
		}

		.t {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.moveBtn {
				width: 10vw;
				display: flex;
				flex-direction: column;

				.line {
					margin: 0.5vw 0vw;
					width: 100%;
					height: 1vw;
					background: rgba(255, 255, 255, 0.23);
				}
			}
		}

		.cont-box {
			margin-top: 5vw;
			position: relative;
			--height-val: 50vh;
			--clip-height: 20vw;
			.cont-text {
				position: relative;
				text-indent: 2em;
				height: var(--height-val);
				color: rgba(255, 255, 255, 1);
				// font-size: 5vw;
				overflow: hidden;
				clip-path: polygon(0% 0%, 100% 0%, 100% var(--clip-height), 0% var(--clip-height));
				.block {
					width: 100%;
					height: calc(var(--height-val) - var(--clip-height));
				}
			}
			.cont-scroll {
				position: absolute;
				top: 0vw;
				left: 0vw;
				height: var(--height-val);
				color: rgba(255, 255, 255, 0.23);
				// font-size: 5vw;
				clip-path: polygon(0% var(--clip-height), 100% var(--clip-height), 100% 100%, 0% 100%);
				.text {
					text-indent: 2em;
					// opacity: 0;
				}
				.block {
					width: 100%;
					height: calc(var(--height-val) - var(--clip-height));
				}
			}
		}

		.b {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 3vw 3vw 0vw;
			.b-l {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				.change-cont {
					background: rgba(126, 126, 126, 0.168);
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					padding: 2vw 1.5vw;
					border-radius: 1.5vw;
				}
			}
			.b-r {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				.more {
					background: rgba(126, 126, 126, 0.168);
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					padding: 2vw 1.5vw;
					border-radius: 1.5vw;
				}
			}
		}
	}
	.time {
		width: max-content;
		box-sizing: border-box;
		padding: 2vw 1.5vw;
		position: absolute;
		color: #fff;
		background: rgba(126, 126, 126, 0.386);
		border-radius: 1.5vw;
		bottom: 42vw;
	}
	.record {
		--record-size: 20vw;
		position: absolute;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--record-size);
		height: var(--record-size);
		// border: 1vw solid #fff;
		bottom: 10%;
		box-sizing: border-box;

		.box-fff {
			position: absolute;
			transition: all 520ms;
			border-radius: 50%;
			background: rgba(255, 255, 255, 1);
			width: 0%;
			height: 0%;
		}

		.record-btn {
			position: absolute;
			transition: all 520ms;
			border-radius: 50%;
			background: rgba(254, 50, 77, 1);
			width: 86%;
			height: 86%;
		}

		.circle-progress {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			position: absolute;
			left: 0vw;
			top: 0vw;

			.circle-progress-outer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				box-sizing: border-box;
				/* 外圆边框 */
				border: 1vw solid rgba(255, 255, 255, 1);
				/* 裁剪为圆形 */
				clip-path: circle(50% at 50% 50%);
			}

			.left {
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				height: 100%;
				overflow: hidden;
			}

			.right {
				position: absolute;
				top: 0;
				left: 50%;
				width: 50%;
				height: 100%;
				overflow: hidden;
			}

			.circle-progress-fill {
				width: 200%;
				height: 100%;
				box-sizing: border-box;
				border: 1vw solid #ff0000;
				position: absolute;
				border-radius: 50%;
				/* 填充背景 */
				/* 裁剪为较小的圆形 */
			}

			.left .circle-progress-fill {
				clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
				// transform: rotate(180deg);
				left: 0;
				// animation: rotate1 calc(var(--time) / 2) linear forwards calc(var(--time) / 2);
			}

			.right .circle-progress-fill {
				clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
				transform: rotate(180deg);
				right: 0;
				// animation: rotate1 calc(var(--time) / 2) linear forwards;
			}
		}
	}

	.ready-box {
		position: absolute;
		.num {
			font-size: 30vw;
			color: #fff;
			font-weight: 700;
			// animation: bounceOut 1s ease-in-out infinite;
		}

		@keyframes bounceOut {
			20% {
				-webkit-transform: scale3d(0.9, 0.9, 0.9);
				transform: scale3d(0.9, 0.9, 0.9);
			}

			50%,
			55% {
				opacity: 1;
				-webkit-transform: scale3d(1.1, 1.1, 1.1);
				transform: scale3d(1.1, 1.1, 1.1);
			}

			to {
				opacity: 0;
				-webkit-transform: scale3d(0.3, 0.3, 0.3);
				transform: scale3d(0.3, 0.3, 0.3);
			}
		}

		@keyframes fadeInUp {
			0% {
				opacity: 0;
				-webkit-transform: translate3d(0, 100%, 0);
				transform: translate3d(0, 100%, 0);
			}

			to {
				opacity: 1;
				-webkit-transform: translateZ(0);
				transform: translateZ(0);
			}
		}

		@keyframes rubberBand {
			0% {
				-webkit-transform: perspective(400px) rotateY(90deg);
				-ms-transform: perspective(400px) rotateY(90deg);
				transform: perspective(400px) rotateY(90deg);
				opacity: 0;
			}

			40% {
				-webkit-transform: perspective(400px) rotateY(-10deg);
				-ms-transform: perspective(400px) rotateY(-10deg);
				transform: perspective(400px) rotateY(-10deg);
			}

			70% {
				-webkit-transform: perspective(400px) rotateY(10deg);
				-ms-transform: perspective(400px) rotateY(10deg);
				transform: perspective(400px) rotateY(10deg);
			}

			100% {
				-webkit-transform: perspective(400px) rotateY(0deg);
				-ms-transform: perspective(400px) rotateY(0deg);
				transform: perspective(400px) rotateY(0deg);
				opacity: 1;
			}
		}
	}

	.cameraChange {
		position: absolute;
		width: 10vw;
		left: 6vw;
		top: 8vw;
		.icon {
			width: 100%;
			display: block;
		}
	}

	.popup-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 5vw;
		overflow: auto;
		.text-box {
			margin-bottom: 5vw;

			.text1 {
				color: #fff;
				font-size: 4vw;
			}

			.text2 {
				margin-top: 2vw;
				font-size: 3vw;
				color: #7c7c7c;
			}
		}
		.cont-list {
			.cont-item {
			}
		}
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}

		.popup-title {
			padding-top: 5vw;
			color: #fff;
			text-align: center;
		}
		.popup-main {
			height: 68vh;
			overflow: auto;
			box-sizing: border-box;
			padding: 2vw;
			.cont-list {
				.item {
					background: rgba(126, 126, 126, 0.186);
					box-sizing: border-box;
					padding: 5vw;
					border-radius: 2.5vw;
					width: 100%;
					margin-bottom: 3vw;
					color: #fff;
					font-size: 3.68vw;
					font-weight: 100;
					text-indent: 2em;

					&.ac {
						border: 1vw solid #98c379;
					}
				}
			}
			.opt-list {
				.item {
					width: 100%;
					margin-bottom: 6vw;
					.title {
						color: #fff;
						font-size: 3.68vw;
						font-weight: 100;
					}
					.slider {
					}
				}
			}
		}
		.people-subBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
			width: 90%;
			height: 15vw;
			margin: 5.2vw auto;
			border-radius: 2.5vw;
			color: #000;
			font-weight: bold;
		}
	}

	.page-bgc {
		display: block;
	}
}
</style>
